<template>

  <div class="flex flex-col min-h-screen">
    <Header></Header>

    <div class="container flex-grow mx-auto max-w-screen-xl mt-5 font-mi">
      <div class="grid grid-cols-4">
        <!-- 左边栏 -->
        <!-- <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">

          <div
            class="mb-3 shadow-md w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">
              <svg t="1731379775353" class="icon  w-5 h-5 mr-1 mb-2px text-gray-800 inline dark:text-white"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43509" width="48"
                height="48">
                <path d="M543.404912 1024L24.824586 505.424037V122.918574h382.5011L925.910376 641.503264z"
                  fill="#FFD24A" p-id="43510"></path>
                <path
                  d="M220.929654 305.932807m-65.711627 0a65.711627 65.711627 0 1 0 131.423253 0 65.711627 65.711627 0 1 0-131.423253 0Z"
                  fill="#FFFFFF" p-id="43511"></path>
                <path
                  d="M220.929654 393.462492c-48.265908 0-87.529684-39.268141-87.529685-87.529685s39.268141-87.529684 87.529685-87.529684S308.459338 257.6669 308.459338 305.932807s-39.268141 87.529684-87.529684 87.529685z m0-131.423254c-24.20059 0-43.893569 19.692979-43.893569 43.893569s19.692979 43.893569 43.893569 43.893569S264.823223 330.133397 264.823223 305.932807s-19.692979-43.893569-43.893569-43.893569z"
                  fill="#DB8F44" p-id="43512"></path>
                <path
                  d="M754.813166 244.362248m-244.362248 0a244.362248 244.362248 0 1 0 488.724496 0 244.362248 244.362248 0 1 0-488.724496 0Z"
                  fill="#00CCC6" p-id="43513"></path>
                <path
                  d="M900.343975 204.500656h-102.763052v-102.763052h-65.454174v102.763052h-102.763052v65.454174h102.763052v102.758689h65.454174V269.95483h102.763052z"
                  fill="#F5F5F5" p-id="43514"></path>
              </svg>标签
            </h2>
            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index" style="font-size: 0.9rem"
              class="inline-block cursor-pointer font-mi bg-purple-100 text-purple-800 text-xs font-medium mr-1 mb-1 px-2.5 py-0.5 rounded hover:bg-purple-200 hover:text-purple-900 dark:hover:bg-gray-500 dark:hover:text-white  dark:text-white dark:bg-gray-700">
              {{ item.name }}
            </div>
          </div>
        </div> -->

        <!-- 左边栏，占用 3 列 -->
        <div class="col-span-4 md:col-span-3 mb-3">
          <!-- 标签 -->
          <div v-if="tags && tags.length > 0"
            class="w-full p-5 pb-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
            <!-- 标签标题 -->
            <h2 class="flex items-center mb-5 font-bold text-gray-900 uppercase dark:text-white">
              <!-- 标签图标 -->
              <svg t="1698980289658" class="icon w-4 h-4 mr-2" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="13858" width="200" height="200">
                <path
                  d="M646.4512 627.5584m-298.1888 0a298.1888 298.1888 0 1 0 596.3776 0 298.1888 298.1888 0 1 0-596.3776 0Z"
                  fill="#C7ACEF" p-id="13859"></path>
                <path
                  d="M467.6096 962.5088c-34.4064 0-68.7616-13.1072-94.976-39.2704l-276.48-276.48c-52.3776-52.3776-52.3776-137.5744 0-189.9008L465.4592 87.552a105.216 105.216 0 0 1 76.8512-30.6176l308.6336 8.3456c55.3472 1.4848 100.096 46.0288 101.7856 101.376l9.5744 310.1696c0.8704 28.7744-10.2912 56.9344-30.6176 77.2608l-369.2032 369.2032c-26.112 26.112-60.4672 39.2192-94.8736 39.2192z m71.8848-844.1856c-11.4176 0-22.4768 4.5568-30.5664 12.6464L139.6224 500.2752c-28.416 28.416-28.416 74.6496 0 103.0144l276.48 276.48c28.416 28.416 74.6496 28.416 103.0144 0l369.2032-369.2032a43.4176 43.4176 0 0 0 12.6464-31.8976l-9.5744-310.1696c-0.7168-22.8864-19.2-41.2672-42.0352-41.8816l-308.6336-8.3456c-0.4608 0.0512-0.8192 0.0512-1.2288 0.0512z"
                  fill="#4F4F4F" p-id="13860"></path>
                <path
                  d="M676.4032 445.5424c-62.208 0-112.8448-50.6368-112.8448-112.8448s50.6368-112.8448 112.8448-112.8448c62.208 0 112.8448 50.6368 112.8448 112.8448s-50.6368 112.8448-112.8448 112.8448z m0-164.1984c-28.3648 0-51.4048 23.04-51.4048 51.4048s23.04 51.4048 51.4048 51.4048c28.3648 0 51.4048-23.04 51.4048-51.4048s-23.0912-51.4048-51.4048-51.4048z"
                  fill="#4F4F4F" p-id="13861"></path>
              </svg>
              标签
              <span class="ml-2 text-gray-600 font-normal dark:text-gray-300">( {{ tags.length }} )</span>
            </h2>

            <!-- 标签列表 -->
            <div class="flex flex-wrap gap-3">
              <a v-for="(tag, index) in tags" :key="index" @click="goTagArticleListPage(tag.id, tag.name)" class="cursor-pointer inline-flex items-center px-3.5 py-1.5 text-xs font-medium text-center border rounded-[12px]
            hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-300 
            dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-gray-800 
            dark:border-gray-700 dark:hover:text-white">
                {{ tag.name }}
                <span
                  class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-sky-800 bg-sky-200 rounded-full">
                  {{ tag.articlesTotal }}
                </span>
              </a>
            </div>

          </div>
        </div>
        <!-- 右边栏 -->
        <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4">
          <UserInfoCard></UserInfoCard>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>

</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import { useRouter } from 'vue-router'
import { getTags } from '@/api/frontend/tag'
import { ref } from 'vue'

const router = useRouter()

const goTagArticleListPage = (id, name) => {
  router.push({ path: '/tag/article/list', query: { id: id, name: name } })
}

const tags = ref([])
getTags().then((e) => {
  if (e.success) {
    tags.value = e.data
  }
})
</script>